<template>
    <view class="comments-list">
        <view v-for="(info, index) in commentList" :key="index" class="comment">
            <view class="c-left">
                <image :src="info.user.avatarUrl" class="avatar" />
            </view>
            <view class="c-right">
                <view class="name">{{ info.user.name }}</view>
                <view class="content">{{ info.content }}</view>
                <view class="time">{{ info.time }}</view>
            </view>
            <!-- 回复的评论 -->
            <view v-for="(child, childIndex) in info.children" :key="childIndex" class="reply">
                <view class="c-left">
                    <image :src="child.user.avatarUrl" class="avatar" />
                </view>
                <view class="c-right">
                    <view class="name">{{ child.user.name }}</view>
                    <view class="content">{{ child.content }}</view>
                    <view class="time">{{ child.time }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            commentList: [
                {
                    user: {
                        name: '张三',
                        avatarUrl: 'http://zerols.top/uploads/20240103/12b2f11c7a7ec7905427c43aea344efa.png'
                    },
                    content: '这是一个评论',
                    time: '2023-12-20',
                    children: [
                        {
                            user: {
                                name: '李四',
                                avatarUrl: 'http://zerols.top/uploads/20240103/12b2f11c7a7ec7905427c43aea344efa.png'
                            },
                            content: '这是一个回复',
                            time: '2023-12-21'
                        }
                    ]
                }
            ]
        }
    }
}
</script>

<style>
.comments-list {
    padding: 10px;
}
.comment {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
.reply {
    padding: 10px;
    margin-left: 30px;
    border-bottom: 1px solid #ccc;
}
.c-left {
    float: left;
    width: 40px;
}
.c-right {
    margin-left: 50px;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.name {
    margin-top: 10px;
    font-size: 14px;
}
.content {
    font-size: 14px;
    margin-top: 5px;
    color: #666;
}
.time {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
}
</style>
